<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件修饰符</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            margin: 30px;
        }

        .father {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="root">
        <h2>欢迎来到{{address}}</h2>

        <!-- prevent 对click事件进行修饰 可以阻止标签的默认行为，例如阻止a标签跳转 -->
        <a href="http://www.baidu.com" @click.prevent="ski">点我跳转页面</a>

        <!-- stop 阻止冒泡事件修饰符 -->
        <div @click="mo2" class="father">
            <div @click.stop="mo1" class="son">阻止子盒子冒泡</div>
        </div>

        <!-- once  事件只触发一次 -->
        <div @click.once="mo1" class="son">事件只触发一次</div>

        <!--  capture  使用事件的捕获模式 -->
        <!-- 这个修饰符是加在外面的盒子上 -->
        <div @click.capture="mo2" class="father">
            使用事件捕获模式
            <div @click.stop="mo1" class="son"></div>
        </div>

        <!--  self  只有event.target是当前操作的元素时才能触发事件 -->
        <div @click.self="mo2" class="father">
            只有事件触发是自己时才可以
            <div @click.stop="mo1" class="son"></div>
        </div>

        <!--  passive  事件默认行为立即执行 -->
        <!-- 例如滚动条滚动时设置循环计数，如果循环次数太大。会先循环输出完才动滚动条。但是设置了这个修饰符就会先动滚动条默认事件，使用较少 -->

        <!-- 补充！：修饰符可以连写，例如既想阻止冒泡又想阻止默认事件  @click.prevent.stop -->
        <!-- 虽然连写前后功能一样，但还是有顺序 -->
    </div>
    <script>
        Vue.config.productionTip = false;
        var vm = new Vue({
            el: '#root',
            data: {
                address: '重庆',
            },
            methods: {
                ski() {
                    alert('页面即将跳转')
                },
                mo1() {
                    alert('我是子容器事件')
                },
                mo2() {
                    alert('我是父容器事件')
                },
            }
        });
    </script>
</body>

</html>